<template>
	<view class="chatLastBox">
		<view class="BG"></view>
		<uni-popup ref="popup" type="message" class="tip">
			<uni-popup-message :type="messageType" :message="messageText" :duration="2000" class="message"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popupdia" type="dialog">
			<uni-popup-dialog type="error" mode="base" :title="diaTitle" content="这可不能后悔" :duration="0" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
		<view class="needLogin" v-if="!isLogin" @click="goLogin">
			<text>去登陆</text>
			<text class="tag">></text>
		</view>
		<view class="blackTier" :animation="animateData" style="opacity: 0;" v-if="showBlackTiers" @click="cancelChooseAvatar"></view>

		<view class="bottomBarAvatar" style="opacity: 0;transform: translateY(200px);" :animation="animateData1" v-if="showBottomBarAvatar">
			<view v-for="(item, index) in chooseWayForAvatar" :key="item.id">
				<view @click="detailAvatar(index)" class="AvatarItem">{{ item.way }}</view>
			</view>
		</view>

		<view v-if="isLogin">
			<view class="userinfo">
				<view class="avatar" @click="changeAvatar">
					<view><text>头像</text></view>
					<view class="right">
						<image class="touxiang" :src="user.avatar"></image>
						<text class="tag">></text>
					</view>
				</view>
				<view class="username">
					<view>用户名</view>
					<view class="right">
						<text>{{ user.username }}</text>
						<text class="tag">></text>
					</view>
				</view>
				<view class="realname" @click="goUpdateRealname">
					<view><text>昵称</text></view>
					<view>
						<text>{{ user.realname }}</text>
						<text class="tag">></text>
					</view>
				</view>
				<view class="updateProd" v-if="addVideo"  @click="GoMyProd">
					<view><text>修改作品</text></view>
						<view>
							<text class="tag">></text>
						</view>
					</view>
					<chatItem></chatItem>
					<button type="warn" class="logout" @click="logout">退出登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import animate from '../../animate.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
import jwt from '../../components/lib/index.js';
import chatItem from './chatitem.vue';
export default {
	components: {
		uniPopup,
		chatItem,
		uniPopupMessage,
		uniPopupDialog
	},
	data() {
		return {
			diaTitle:"确认退出?",
			messageText: '添加成功',
			messageType: 'success',
			showBlackTiers: false,
			showBottomBarAvatar: false,
			chooseWayForAvatar: [{ id: 0, way: '查看头像' }, { id: 1, way: '从相册中选择' }, { id: 2, way: '拍照' }]
		};
	},
	onPullDownRefresh() {
		
		setTimeout(()=>{
			uni.reLaunch({
				url:"/pages/chat/chat"
			})
		},500)
	},
	mixins: [animate.mixin],
	computed: {
		isLogin() {
			return uni.getStorageSync('LoginToken') ? true : false;
		},
		addVideo(){
			return (
			        this.user.status === "876ea4f21078c7d38e3b0bdc74a" ||
			        this.user.status === "d630fbb5fd6026ccb4af0eb68d3"
			      );
		},
	},
	methods: {
		GoMyProd(){
			uni.navigateTo({
				url:"/pages/Myprod/myProd"
			})
		},
		close(done) {
			done();
		},
		confirm(done) {
			uni.clearStorageSync();
			uni.reLaunch({
				url: '/pages/chat/chat'
			});
			done();
		},
		logout() {
			this.diaTitle = "确定退出?"
			this.$refs.popupdia.open();
			
		},
		goUpdateRealname() {
			uni.navigateTo({
				url: '/pages/updateRealname/updateRealname'
			});
		},
		open() {
			this.$refs.popup.open();
		},
		detailAvatar(index) {
			switch (index) {
				case 0:
					uni.previewImage({
						urls: [this.user.avatar],
						fail: err => {
							console.log(err);
						}
					});
					break;
				case 1:
					uni.chooseImage({
						count: 1, //默认9
						sourceType: ['album'], //从相册选择
						success: res => {
							console.log(res);
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: 'https://www.ttzxh.icu:443/api/upload/up',
								filePath: tempFilePaths[0],
								name: 'imgfile',
								formData: {
									username: this.user.username
								},
								success: res => {
									console.log(res);
									let result = JSON.parse(res.data);
									if (result.error === -1) {
										this.open();
										this.messageText = '修改成功';
										this.messageType = 'success';
										this.user.avatar = result.message;
										uni.setStorageSync('usernameInfo', this.user);
									} else {
										this.open();
										this.messageText = '修改失败,请再试一次';
										this.messageType = 'warn';
									}
								},
								fail: () => {
									//错误回调
									this.open();
									this.messageText = '修改失败,稍后再试或联系我呀';
									this.messageType = 'error';
								},
								complete: () => {
									this.showBlackTiers = false;
									this.showBottomBarAvatar = false;
								}
							});
							// }
						}
					});
					break;
				case 2:
					uni.chooseImage({
						count: 1, //默认9
						sourceType: ['camera'], //从相机选择
						success: res => {
							console.log(res);
							const tempFilePaths = res.tempFilePaths;
							// const templateType = res.tempFiles[0].type.split('/')[0];
							// if (res.tempFiles[0].size / 1024 / 1024 > 2) {
							// 	//错误回调
							// 	this.open();
							// 	this.messageText = '请选择大小2m以内的图片';
							// 	this.messageType = 'warn';
							// 	return;
							// } else {
							uni.uploadFile({
								url: 'https://www.ttzxh.icu:443/api/upload/up', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'imgfile',
								formData: {
									username: this.user.username
								},
								success: res => {
									console.log(res);
									let result = JSON.parse(res.data);
									if (result.error === -1) {
										this.open();
										this.messageText = '修改成功';
										this.messageType = 'success';
										this.user.avatar = result.message;
										uni.setStorageSync('usernameInfo', this.user);
									} else {
										this.open();
										this.messageText = '修改失败,请再试一次';
										this.messageType = 'warn';
									}
								},
								fail: () => {
									//错误回调
									this.open();
									this.messageText = '修改失败,稍后再试或联系我呀';
									this.messageType = 'error';
								},
								complete: () => {
									this.showBlackTiers = false;
									this.showBottomBarAvatar = false;
								}
							});
						}
						// }
					});
					break;
			}
		},
		cancelChooseAvatar() {
			setTimeout(() => {
				this.showBlackTiers = false;
				this.showBottomBarAvatar = false;
			}, 300);
			this.fadeOut();
			this.fadeOutTranslateYless();
		},
		changeAvatar() {
			this.showBottomBarAvatar = true;
			this.showBlackTiers = true;
			this.fadeInTranslateY();
			this.fadeIn();
		},

		goLogin() {
			console.log('aa');
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.chatLastBox {
	position: relative;
	width: 100%;
	height: 100vh;
}
.blackTier {
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	z-index: 1;
}
.BG {
	width: 100%;
	height: 100vh;
	position: fixed;
	background-image: url(../../static/img/chongsheng1.jpg);
	background-size: 100% 100%;
	opacity: 0.5;
	z-index: -1;
	top: 0;
}
.message {
	margin-top: 30px;
}
.tag {
	margin-left: 10px;
}
.bottomBarAvatar {
	width: 100%;
	height: 150px;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	z-index: 3000;
	text-align: center;
	.AvatarItem {
		width: 100%;
		line-height: 50px;
		transition: all 0.2s;
		&:active {
			background-color: #ddd;
		}
	}
}
.needLogin {
	box-sizing: border-box;
	background-color: #fff;
	margin: 50px 25px;
	padding: 25px;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	&:active {
		background-color: $uni-bg-color-blue;
	}
	.tag {
		font-size: 19px;
	}
}
.userinfo {
	// margin-top: 100upx;
	padding: 100upx 15px 0 15px;
	.updateProd{
		font-size: 16px;
		height: 50px;
		background-color: rgb(255, 255, 255);
		border-radius: 9px;
		padding: 5px 15px;
		margin: 15px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 1px 3px 0 #808080;
		transition: all 0.3s;
		&:active {
			background-color: $uni-bg-color-blue;
		}
		.right {
			display: flex;
			align-items: center;
			.touxiang {
				vertical-align: middle;
				line-height: 60px;
				border-radius: 50%;
				width: 50px;
				height: 50px;
				margin-right: 5px;
				background-color: #dddddd;
			}
			.tag {
				line-height: 60px;
				vertical-align: top;
				font-size: 19px;
			}
		}
	}
	.avatar {
		font-size: 16px;
		height: 50px;
		background-color: rgb(255, 255, 255);
		border-radius: 9px;
		padding: 5px 15px;
		margin: 15px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 1px 3px 0 #808080;
		transition: all 0.3s;
		&:active {
			background-color: $uni-bg-color-blue;
		}
		.right {
			display: flex;
			align-items: center;
			.touxiang {
				vertical-align: middle;
				line-height: 60px;
				border-radius: 50%;
				width: 50px;
				height: 50px;
				margin-right: 5px;
				background-color: #dddddd;
			}
			.tag {
				line-height: 60px;
				vertical-align: top;
				font-size: 19px;
			}
		}
	}
	.realname {
		height: 50px;
		padding: 0 15px;
		margin: 15px 0px;
		border-radius: 9px;
		background-color: rgb(255, 255, 255);
		display: flex;
		justify-content: space-between;
		align-items: center;
		&:active {
			background-color: $uni-bg-color-blue;
		}
	}
	.username {
		height: 50px;
		border-radius: 9px;
		padding: 0 15px;
		background-color: rgba($color: #fff, $alpha: 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		.right {
			color: #999999;
		}
	}
}
.logout {
	margin: 5px 0px;
}
</style>
